<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--  
        需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

        自定义指令总结:
            一、定义语法:
                (1).局部指令:
                    new Vue({                               new Vue({
                        directives:{指令名:配置对象}   或        directives(指令名:回调函数){}
                    )}                                      )}
                (2).全局指令:
                    Vue.directive(指令名,配置对象）    或    Vue.directive(指令名,回调函数)

            二、配置对象中常用的3个回调:
                (1).bind:指令与元素成功绑定时调用。
                (2).inserted:指令所在元素被插入页面时调用。
                (3).update:指令所在模板结构被重新解析时调用。

            三、备注:
                1.指令定义时不加v-,但使用时要加v-;
                2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。


    -->
    <div id="root">
      <h2>尚硅谷</h2>
      <h2>当前的n值是:<span v-text="n"></span></h2>
      <h2>放大十倍后的n值是:<span v-big="n"></span></h2>
      <button @click="n++">点我n+1</button>
      <hr />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    //全局的方式定义指令
    Vue.directive("fbind", {
      //指令与元素成功绑定时(一上来)
      bind(element, binding) {
        // console.log('bind');
        element.value = binding.value;
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        // console.log('inserted');
        element.focus();
      },
      //指令所在模板被重新解析时
      update(element, binding) {
        // console.log('update');
        element.value = binding.value;
      },
    });

    new Vue({
      el: "#root",
      data: {
        n: 99,
      },
      directives: {
        //big何时会被调用？ 1.指令与元素成功绑定时。  2.指令所在的模板被重新解析时。
        big(element, binding) {
          console.log("big");
          console.log(this); //注意 此处的this是window
          element.innerText = binding.value * 10;
        },
        //这种写法不能实现功能
        /* fbind(element,binding){
            element.value = binding.value
            element.focus()
        } */
        //这种对象的形式 可以更精确的控制自定义指令
        /* fbind: {
          //指令与元素成功绑定时(一上来)
          bind(element, binding) {
            // console.log('bind');
            element.value = binding.value;
          },
          //指令所在元素被插入页面时
          inserted(element, binding) {
            // console.log('inserted');
            element.focus();
          },
          //指令所在模板被重新解析时
          update(element, binding) {
            // console.log('update');
            element.value = binding.value;
          },
        }, */
      },
    });
  </script>
</html>
